<!DOCTYPE html>

<html class="app-ui">

    <head>
        <!-- Meta -->
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

        <!-- Document title -->
        <title>Forms &ndash; Samples | AppUI</title>

        <meta name="description" content="AppUI - Admin Dashboard Template & UI Framework" />
        <meta name="author" content="rustheme" />
        <meta name="robots" content="noindex, nofollow" />

        <!-- Favicons -->
        <link rel="apple-touch-icon" href="assets/img/favicons/apple-touch-icon.png" />
        <link rel="icon" href="assets/img/favicons/favicon.ico" />

        <!-- Google fonts -->
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,400italic,500,900%7CRoboto+Slab:300,400%7CRoboto+Mono:400" />

        <!-- AppUI CSS stylesheets -->
        <link rel="stylesheet" id="css-font-awesome" href="assets/css/font-awesome.css" />
        <link rel="stylesheet" id="css-ionicons" href="assets/css/ionicons.css" />
        <link rel="stylesheet" id="css-bootstrap" href="assets/css/bootstrap.css" />
        <link rel="stylesheet" id="css-app" href="assets/css/app.css" />
        <link rel="stylesheet" id="css-app-custom" href="assets/css/app-custom.css" />
        <!-- End Stylesheets -->
    </head>

    <body class="app-ui layout-has-drawer layout-has-fixed-header">
        <div class="app-layout-canvas">
            <div class="app-layout-container">

                <!-- Drawer -->
                <aside class="app-layout-drawer">

                    <!-- Drawer scroll area -->
                    <div class="app-layout-drawer-scroll">
                        <!-- Drawer logo -->
                        <div id="logo" class="drawer-header">
                            <a href="index.html"><img class="img-responsive" src="assets/img/logo/logo-backend.png" title="AppUI" alt="AppUI" /></a>
                        </div>

                        <!-- Drawer navigation -->
                        <nav class="drawer-main">
                            <ul class="nav nav-drawer">

                                <li class="nav-item nav-drawer-header">Apps</li>

                                <li class="nav-item">
                                    <a href="index.html"><i class="ion-ios-speedometer-outline"></i> Dashboard</a>
                                </li>

                                <li class="nav-item">
                                    <a href="frontend_home.html"><i class="ion-ios-monitor-outline"></i> Frontend</a>
                                </li>

                                <li class="nav-item nav-drawer-header">Components</li>

                                <li class="nav-item nav-item-has-subnav">
                                    <a href="javascript:void(0)"><i class="ion-ios-calculator-outline"></i> UI Elements</a>
                                    <ul class="nav nav-subnav">

                                        <li>
                                            <a href="base_ui_buttons.html">Buttons</a>
                                        </li>

                                        <li>
                                            <a href="base_ui_cards.html">Cards</a>
                                        </li>

                                        <li>
                                            <a href="base_ui_cards_api.html">Cards API</a>
                                        </li>

                                        <li>
                                            <a href="base_ui_layout.html">Layout</a>
                                        </li>

                                        <li>
                                            <a href="base_ui_grid.html">Grid</a>
                                        </li>

                                        <li>
                                            <a href="base_ui_icons.html">Icons</a>
                                        </li>

                                        <li>
                                            <a href="base_ui_modals_tooltips.html">Modals / Tooltips</a>
                                        </li>

                                        <li>
                                            <a href="base_ui_alerts_notify.html">Alerts / Notify</a>
                                        </li>

                                        <li>
                                            <a href="base_ui_pagination.html">Pagination</a>
                                        </li>

                                        <li>
                                            <a href="base_ui_progress.html">Progress</a>
                                        </li>

                                        <li>
                                            <a href="base_ui_tabs.html">Tabs</a>
                                        </li>

                                        <li>
                                            <a href="base_ui_typography.html">Typography</a>
                                        </li>

                                        <li>
                                            <a href="base_ui_widgets.html">Widgets</a>
                                        </li>

                                    </ul>
                                </li>

                                <li class="nav-item nav-item-has-subnav active open">
                                    <a href="javascript:void(0)"><i class="ion-ios-compose-outline"></i> Forms</a>
                                    <ul class="nav nav-subnav">

                                        <li>
                                            <a href="base_forms_elements.html">Elements</a>
                                        </li>

                                        <li class="active">
                                            <a href="base_forms_samples.html">Samples</a>
                                        </li>

                                        <li>
                                            <a href="base_forms_pickers_select.html">Pickers &amp; Select</a>
                                        </li>

                                        <li>
                                            <a href="base_forms_validation.html">Validation</a>
                                        </li>

                                        <li>
                                            <a href="base_forms_wizard.html">Wizard</a>
                                        </li>

                                    </ul>
                                </li>

                                <li class="nav-item nav-item-has-subnav">
                                    <a href="javascript:void(0)"><i class="ion-ios-list-outline"></i> Tables</a>
                                    <ul class="nav nav-subnav">

                                        <li>
                                            <a href="base_tables_styles.html">Styles</a>
                                        </li>

                                        <li>
                                            <a href="base_tables_responsive.html">Responsive</a>
                                        </li>

                                        <li>
                                            <a href="base_tables_tools.html">Tools</a>
                                        </li>

                                        <li>
                                            <a href="base_tables_pricing.html">Pricing</a>
                                        </li>

                                        <li>
                                            <a href="base_tables_datatables.html">Wizard</a>
                                        </li>

                                    </ul>
                                </li>

                                <li class="nav-item nav-item-has-subnav">
                                    <a href="javascript:void(0)"><i class="ion-ios-browsers-outline"></i> Pages</a>
                                    <ul class="nav nav-subnav">

                                        <li>
                                            <a href="base_pages_blank.html">Blank</a>
                                        </li>

                                        <li>
                                            <a href="base_pages_inbox.html">Inbox</a>
                                        </li>

                                        <li>
                                            <a href="base_pages_invoice.html">Invoice</a>
                                        </li>

                                        <li>
                                            <a href="base_pages_profile.html">Profile</a>
                                        </li>

                                        <li>
                                            <a href="base_pages_search.html">Search</a>
                                        </li>

                                    </ul>
                                </li>

                                <li class="nav-item nav-item-has-subnav">
                                    <a href="javascript:void(0)"><i class="ion-social-javascript-outline"></i> JS plugins</a>
                                    <ul class="nav nav-subnav">

                                        <li>
                                            <a href="base_js_maps.html">Maps</a>
                                        </li>

                                        <li>
                                            <a href="base_js_sliders.html">Sliders</a>
                                        </li>

                                        <li>
                                            <a href="base_js_charts_flot.html">Charts - Flot</a>
                                        </li>

                                        <li>
                                            <a href="base_js_charts_chartjs.html">Charts - Chart.js</a>
                                        </li>

                                        <li>
                                            <a href="base_js_charts_sparkline.html">Charts - Sparkline</a>
                                        </li>

                                        <li>
                                            <a href="base_js_draggable.html">Draggable</a>
                                        </li>

                                        <li>
                                            <a href="base_js_syntax_highlight.html">Syntax highlight</a>
                                        </li>

                                    </ul>
                                </li>

                            </ul>
                        </nav>
                        <!-- End drawer navigation -->

                        <div class="drawer-footer">
                            <p class="copyright">AppUI Template &copy;</p>
                            <a href="https://shapebootstrap.net/item/1525731-appui-admin-frontend-template/?ref=rustheme" target="_blank" rel="nofollow">Purchase a license</a>
                        </div>
                    </div>
                    <!-- End drawer scroll area -->
                </aside>
                <!-- End drawer -->

                <!-- Header -->
                <header class="app-layout-header">
                    <nav class="navbar navbar-default">
                        <div class="container-fluid">
                            <div class="navbar-header">
                                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#header-navbar-collapse" aria-expanded="false">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
                                <button class="pull-left hidden-lg hidden-md navbar-toggle" type="button" data-toggle="layout" data-action="sidebar_toggle">
					<span class="sr-only">Toggle drawer</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
                                <span class="navbar-page-title">
					
					Forms &ndash; Samples
				</span>
                            </div>

                            <div class="collapse navbar-collapse" id="header-navbar-collapse">
                                <!-- Header search form -->
                                <form class="navbar-form navbar-left app-search-form" role="search">
                                    <div class="form-group">
                                        <div class="input-group">
                                            <input class="form-control" type="search" id="search-input" placeholder="Search..." />
                                            <span class="input-group-btn">
								<button class="btn" type="button"><i class="ion-ios-search-strong"></i></button>
							</span>
                                        </div>
                                    </div>
                                </form>

                                <ul id="main-menu" class="nav navbar-nav navbar-left">
                                    <li class="dropdown">
                                        <a href="#" data-toggle="dropdown">English <span class="caret"></span></a>

                                        <ul class="dropdown-menu">
                                            <li><a href="javascript:void(0)">French</a></li>
                                            <li><a href="javascript:void(0)">German</a></li>
                                            <li><a href="javascript:void(0)">Italian</a></li>
                                        </ul>
                                    </li>
                                    <li class="dropdown">
                                        <a href="#" data-toggle="dropdown">Pages <span class="caret"></span></a>

                                        <ul class="dropdown-menu">
                                            <li><a href="javascript:void(0)">Analytics</a></li>
                                            <li><a href="javascript:void(0)">Visits</a></li>
                                            <li><a href="javascript:void(0)">Changelog</a></li>
                                        </ul>
                                    </li>
                                </ul>
                                <!-- .navbar-left -->

                                <ul class="nav navbar-nav navbar-right navbar-toolbar hidden-sm hidden-xs">
                                    <li>
                                        <!-- Opens the modal found at the bottom of the page -->
                                        <a href="javascript:void(0)" data-toggle="modal" data-target="#apps-modal"><i class="ion-grid"></i></a>
                                    </li>

                                    <li class="dropdown">
                                        <a href="javascript:void(0)" data-toggle="dropdown"><i class="ion-ios-bell"></i> <span class="badge">3</span></a>
                                        <ul class="dropdown-menu dropdown-menu-right">
                                            <li class="dropdown-header">Profile</li>
                                            <li>
                                                <a tabindex="-1" href="javascript:void(0)"><span class="badge pull-right">3</span> News </a>
                                            </li>
                                            <li>
                                                <a tabindex="-1" href="javascript:void(0)"><span class="badge pull-right">1</span> Messages </a>
                                            </li>
                                            <li class="divider"></li>
                                            <li class="dropdown-header">More</li>
                                            <li>
                                                <a tabindex="-1" href="javascript:void(0)">Edit Profile..</a>
                                            </li>
                                        </ul>
                                    </li>

                                    <li class="dropdown dropdown-profile">
                                        <a href="javascript:void(0)" data-toggle="dropdown">
                                            <span class="m-r-sm">John Doe <span class="caret"></span></span>
                                            <img class="img-avatar img-avatar-48" src="assets/img/avatars/avatar3.jpg" alt="User profile pic" />
                                        </a>
                                        <ul class="dropdown-menu dropdown-menu-right">
                                            <li class="dropdown-header">
                                                Pages
                                            </li>
                                            <li>
                                                <a href="base_pages_profile.html">Profile</a>
                                            </li>
                                            <li>
                                                <a href="base_pages_profile.html"><span class="badge badge-success pull-right">3</span> Blog</a>
                                            </li>
                                            <li>
                                                <a href="frontend_login_signup.html">Logout</a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                                <!-- .navbar-right -->
                            </div>
                        </div>
                        <!-- .container-fluid -->
                    </nav>
                    <!-- .navbar-default -->
                </header>
                <!-- End header -->

                <main class="app-layout-content">

                    <!-- Page Content -->
                    <div class="container-fluid p-y-md">

                        <!-- Registration forms -->
                        <h2 class="section-title">Registration forms</h2>
                        <div class="row">
                            <div class="col-lg-4">
                                <!-- Bootstrap registration -->
                                <div class="card">
                                    <div class="card-header bg-green bg-inverse">
                                        <h4>Bootstrap</h4>
                                        <ul class="card-actions">
                                            <li>
                                                <button type="button" data-toggle="card-action" data-action="refresh_toggle" data-action-mode="demo"><i class="ion-refresh"></i></button>
                                            </li>
                                            <li>
                                                <button type="button" data-toggle="card-action" data-action="content_toggle"></button>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="card-block">
                                        <form class="form-horizontal" action="base_forms_samples.html" method="post" onsubmit="return false;">
                                            <div class="form-group">
                                                <label class="col-xs-12" for="register1-username">Username</label>
                                                <div class="col-xs-12">
                                                    <input class="form-control" type="text" id="register1-username" name="register1-username" placeholder="Enter username..." />
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-xs-12" for="register1-email">Email</label>
                                                <div class="col-xs-12">
                                                    <input class="form-control" type="email" id="register1-email" name="register1-email" placeholder="Enter email..." />
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-xs-12" for="register1-password">Password</label>
                                                <div class="col-xs-12">
                                                    <input class="form-control" type="password" id="register1-password" name="register1-password" placeholder="Enter password..." />
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-xs-12" for="register1-password2">Confirm Password</label>
                                                <div class="col-xs-12">
                                                    <input class="form-control" type="password" id="register1-password2" name="register1-password2" placeholder="Confirm password..." />
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="col-xs-12">
                                                    <label class="css-input switch switch-sm switch-primary">
									<input type="checkbox" id="register1-terms" name="register1-terms"><span></span> I agree with terms
								</label>
                                                </div>
                                            </div>
                                            <div class="form-group m-b-0">
                                                <div class="col-xs-12">
                                                    <button class="btn btn-app" type="submit">Register</button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                    <!-- .card-block -->
                                </div>
                                <!-- .card -->
                                <!-- End Bootstrap registration -->
                            </div>
                            <!-- .col-lg-4 -->

                            <div class="col-lg-4">
                                <!-- Material registration -->
                                <div class="card">
                                    <div class="card-header bg-green bg-inverse">
                                        <h4>Material</h4>
                                        <ul class="card-actions">
                                            <li>
                                                <button type="button" data-toggle="card-action" data-action="refresh_toggle" data-action-mode="demo"><i class="ion-refresh"></i></button>
                                            </li>
                                            <li>
                                                <button type="button" data-toggle="card-action" data-action="content_toggle"></button>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="card-block">
                                        <form class="form-horizontal m-t-sm" action="base_forms_samples.html" method="post" onsubmit="return false;">
                                            <div class="form-group">
                                                <div class="col-xs-12">
                                                    <div class="form-material">
                                                        <input class="form-control" type="text" id="register2-username" name="register2-username" placeholder="Enter username..." />
                                                        <label for="register2-username">Username</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="col-xs-12">
                                                    <div class="form-material">
                                                        <input class="form-control" type="email" id="register2-email" name="register2-email" placeholder="Enter email..." />
                                                        <label for="register2-email">Email</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="col-xs-12">
                                                    <div class="form-material">
                                                        <input class="form-control" type="password" id="register2-password" name="register2-password" placeholder="Enter password..." />
                                                        <label for="register2-password">Password</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="col-xs-12">
                                                    <div class="form-material">
                                                        <input class="form-control" type="password" id="register2-password2" name="register2-password2" placeholder="Confirm password..." />
                                                        <label for="register2-password2">Confirm Password</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="col-xs-12">
                                                    <label class="css-input switch switch-sm switch-primary">
									<input type="checkbox" id="register2-terms" name="register2-terms"><span></span> I agree with terms
								</label>
                                                </div>
                                            </div>
                                            <div class="form-group m-b-0">
                                                <div class="col-xs-12">
                                                    <button class="btn btn-app" type="submit">Register</button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                    <!-- .card-block -->
                                </div>
                                <!-- .card -->
                                <!-- End Material registration -->
                            </div>
                            <!-- .col-lg-4 -->

                            <div class="col-lg-4">
                                <!-- Material (floating) registration -->
                                <div class="card">
                                    <div class="card-header bg-green bg-inverse">
                                        <h4>Material (floating)</h4>
                                        <ul class="card-actions">
                                            <li>
                                                <button type="button" data-toggle="card-action" data-action="refresh_toggle" data-action-mode="demo"><i class="ion-refresh"></i></button>
                                            </li>
                                            <li>
                                                <button type="button" data-toggle="card-action" data-action="content_toggle"></button>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="card-block">
                                        <form class="form-horizontal m-t-sm" action="base_forms_samples.html" method="post" onsubmit="return false;">
                                            <div class="form-group">
                                                <div class="col-xs-12">
                                                    <div class="form-material floating">
                                                        <input class="form-control" type="text" id="register3-username" name="register3-username">
                                                        <label for="register3-username">Username</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="col-xs-12">
                                                    <div class="form-material floating">
                                                        <input class="form-control" type="email" id="register3-email" name="register3-email">
                                                        <label for="register3-email">Email</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="col-xs-12">
                                                    <div class="form-material floating">
                                                        <input class="form-control" type="password" id="register3-password" name="register3-password">
                                                        <label for="register3-password">Password</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="col-xs-12">
                                                    <div class="form-material floating">
                                                        <input class="form-control" type="password" id="register3-password2" name="register3-password2">
                                                        <label for="register3-password2">Confirm Password</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="col-xs-12">
                                                    <label class="css-input switch switch-sm switch-primary">
									<input type="checkbox" id="register3-terms" name="register3-terms"><span></span> I agree with terms
								</label>
                                                </div>
                                            </div>
                                            <div class="form-group m-b-0">
                                                <div class="col-xs-12">
                                                    <button class="btn btn-app" type="submit">Register</button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                    <!-- .card-block -->
                                </div>
                                <!-- .card -->
                                <!-- End Material (floating) registration -->
                            </div>
                            <!-- .col-lg-4 -->

                        </div>
                        <!-- .row -->

                        <div class="row">
                            <div class="col-lg-4">
                                <!-- Bootstrap registration -->
                                <div class="card">
                                    <div class="card-header bg-green bg-inverse">
                                        <h4>Bootstrap</h4>
                                        <ul class="card-actions">
                                            <li>
                                                <button type="button" data-toggle="card-action" data-action="refresh_toggle" data-action-mode="demo"><i class="ion-refresh"></i></button>
                                            </li>
                                            <li>
                                                <button type="button" data-toggle="card-action" data-action="content_toggle"></button>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="card-block">
                                        <form class="form-horizontal m-t-sm" action="base_forms_samples.html" method="post" onsubmit="return false;">
                                            <div class="form-group">
                                                <div class="col-xs-6">
                                                    <label for="register4-firstname">First name</label>
                                                    <input class="form-control" type="text" id="register4-firstname" name="register4-firstname" placeholder="Your first name" />
                                                </div>
                                                <div class="col-xs-6">
                                                    <label for="register4-lastname">Last name</label>
                                                    <input class="form-control" type="text" id="register4-lastname" name="register4-lastname" placeholder="Your last name" />
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-xs-12" for="register4-account">Company</label>
                                                <div class="col-xs-12">
                                                    <div class="input-group">
                                                        <input class="form-control" type="text" id="register4-account" name="register4-account" placeholder="Company's name..." />
                                                        <span class="input-group-addon">.example.com</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-xs-12" for="register4-email">Email</label>
                                                <div class="col-xs-12">
                                                    <div class="input-group">
                                                        <input class="form-control" type="email" id="register4-email" name="register4-email" placeholder="Enter email..." />
                                                        <span class="input-group-addon"><i class="ion-ios-email"></i></span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-xs-12" for="register4-password">Password</label>
                                                <div class="col-xs-12">
                                                    <div class="input-group">
                                                        <input class="form-control" type="password" id="register4-password" name="register4-password" placeholder="Enter password..." />
                                                        <span class="input-group-addon"><i class="ion-asterisk"></i></span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-xs-12" for="register4-password2">Confirm Password</label>
                                                <div class="col-xs-12">
                                                    <div class="input-group">
                                                        <input class="form-control" type="password" id="register4-password2" name="register4-password2" placeholder="Enter password..." />
                                                        <span class="input-group-addon"><i class="ion-asterisk"></i></span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="col-xs-12">
                                                    <label class="css-input css-checkbox css-checkbox-default">
									<input type="checkbox" id="register4-terms" name="register4-terms"><span></span> I agree with terms
								</label>
                                                </div>
                                            </div>
                                            <div class="form-group m-b-0">
                                                <div class="col-xs-12">
                                                    <button class="btn btn-app" type="submit">Register</button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                    <!-- .card-block -->
                                </div>
                                <!-- .card -->
                                <!-- End Bootstrap registration -->
                            </div>
                            <!-- .col-lg-4 -->

                            <div class="col-lg-4">
                                <!-- Material registration -->
                                <div class="card">
                                    <div class="card-header bg-green bg-inverse">
                                        <h4>Material</h4>
                                        <ul class="card-actions">
                                            <li>
                                                <button type="button" data-toggle="card-action" data-action="refresh_toggle" data-action-mode="demo"><i class="ion-refresh"></i></button>
                                            </li>
                                            <li>
                                                <button type="button" data-toggle="card-action" data-action="content_toggle"></button>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="card-block">
                                        <form class="form-horizontal m-t-sm" action="base_forms_samples.html" method="post" onsubmit="return false;">
                                            <div class="form-group">
                                                <div class="col-xs-6">
                                                    <div class="form-material">
                                                        <input class="form-control" type="text" id="register5-firstname" name="register5-firstname" placeholder="Your first name" />
                                                        <label for="register5-firstname">First name</label>
                                                    </div>
                                                </div>
                                                <div class="col-xs-6">
                                                    <div class="form-material">
                                                        <input class="form-control" type="text" id="register5-lastname" name="register5-lastname" placeholder="Your last name" />
                                                        <label for="register5-lastname">Last name</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="col-xs-12">
                                                    <div class="form-material input-group">
                                                        <input class="form-control" type="text" id="register5-account" name="register5-account" placeholder="Company's name..." />
                                                        <label for="register5-account">Company</label>
                                                        <span class="input-group-addon">.example.com</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="col-xs-12">
                                                    <div class="form-material input-group">
                                                        <input class="form-control" type="email" id="register5-email" name="register5-email" placeholder="Enter email..." />
                                                        <label for="register5-email">Email</label>
                                                        <span class="input-group-addon"><i class="ion-ios-email"></i></span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="col-xs-12">
                                                    <div class="form-material input-group">
                                                        <input class="form-control" type="password" id="register5-password" name="register5-password" placeholder="Enter password..." />
                                                        <label for="register5-password">Password</label>
                                                        <span class="input-group-addon"><i class="ion-asterisk"></i></span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="col-xs-12">
                                                    <div class="form-material input-group">
                                                        <input class="form-control" type="password" id="register5-password2" name="register5-password2" placeholder="Confirm password..." />
                                                        <label for="register5-password2">Confirm Password</label>
                                                        <span class="input-group-addon"><i class="ion-asterisk"></i></span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="col-xs-12">
                                                    <label class="css-input css-checkbox css-checkbox-default">
									<input type="checkbox" id="register5-terms" name="register5-terms"><span></span> I agree with terms
								</label>
                                                </div>
                                            </div>
                                            <div class="form-group m-b-0">
                                                <div class="col-xs-12">
                                                    <button class="btn btn-app" type="submit">Register</button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                    <!-- .card-block -->
                                </div>
                                <!-- .card -->
                                <!-- End Material registration -->
                            </div>
                            <!-- .col-lg-4 -->

                            <div class="col-lg-4">
                                <!-- Material (floating) registration -->
                                <div class="card">
                                    <div class="card-header bg-green bg-inverse">
                                        <h4>Material (floating)</h4>
                                        <ul class="card-actions">
                                            <li>
                                                <button type="button" data-toggle="card-action" data-action="refresh_toggle" data-action-mode="demo"><i class="ion-refresh"></i></button>
                                            </li>
                                            <li>
                                                <button type="button" data-toggle="card-action" data-action="content_toggle"></button>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="card-block">
                                        <form class="form-horizontal m-t-sm" action="base_forms_samples.html" method="post" onsubmit="return false;">
                                            <div class="form-group">
                                                <div class="col-xs-6">
                                                    <div class="form-material floating">
                                                        <input class="form-control" type="text" id="register6-firstname" name="register6-firstname">
                                                        <label for="register6-firstname">First name</label>
                                                    </div>
                                                </div>
                                                <div class="col-xs-6">
                                                    <div class="form-material floating">
                                                        <input class="form-control" type="text" id="register6-lastname" name="register6-lastname">
                                                        <label for="register6-lastname">Last name</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="col-xs-12">
                                                    <div class="form-material input-group floating">
                                                        <input class="form-control" type="text" id="register6-account" name="register6-account">
                                                        <label for="register6-account">Company</label>
                                                        <span class="input-group-addon">.example.com</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="col-xs-12">
                                                    <div class="form-material input-group floating">
                                                        <input class="form-control" type="email" id="register6-email" name="register6-email">
                                                        <label for="register6-email">Email</label>
                                                        <span class="input-group-addon"><i class="ion-ios-email"></i></span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="col-xs-12">
                                                    <div class="form-material input-group floating">
                                                        <input class="form-control" type="password" id="register6-password" name="register6-password">
                                                        <label for="register6-password">Password</label>
                                                        <span class="input-group-addon"><i class="ion-asterisk"></i></span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="col-xs-12">
                                                    <div class="form-material input-group floating">
                                                        <input class="form-control" type="password" id="register6-password2" name="register6-password2">
                                                        <label for="register6-password2">Confirm Password</label>
                                                        <span class="input-group-addon"><i class="ion-asterisk"></i></span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="col-xs-12">
                                                    <label class="css-input css-checkbox css-checkbox-default">
									<input type="checkbox" id="register6-terms" name="register6-terms"><span></span> I agree with terms
								</label>
                                                </div>
                                            </div>
                                            <div class="form-group m-b-0">
                                                <div class="col-xs-12">
                                                    <button class="btn btn-app" type="submit">Register</button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                    <!-- .card-block -->
                                </div>
                                <!-- .card -->
                                <!-- End Material (floating) registration -->
                            </div>
                            <!-- .col-lg-4 -->

                        </div>
                        <!-- .row -->
                        <!-- End Registration forms -->

                        <!-- Login Forms -->
                        <h2 class="section-title">Login Forms</h2>
                        <div class="row">
                            <div class="col-lg-4">
                                <!-- Bootstrap Login -->
                                <div class="card">
                                    <div class="card-header bg-blue bg-inverse">
                                        <h4>Bootstrap</h4>
                                        <ul class="card-actions">
                                            <li>
                                                <button type="button" data-toggle="card-action" data-action="refresh_toggle" data-action-mode="demo"><i class="ion-refresh"></i></button>
                                            </li>
                                            <li>
                                                <button type="button" data-toggle="card-action" data-action="content_toggle"></button>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="card-block">
                                        <form class="form-horizontal m-t-xs" action="base_forms_samples.html" method="post" onsubmit="return false;">
                                            <div class="form-group">
                                                <label class="col-xs-12" for="login1-username">Username</label>
                                                <div class="col-xs-12">
                                                    <input class="form-control" type="text" id="login1-username" name="login1-username" placeholder="Enter username..." />
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-xs-12" for="login1-password">Password</label>
                                                <div class="col-xs-12">
                                                    <input class="form-control" type="password" id="login1-password" name="login1-password" placeholder="Enter password..." />
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="col-xs-12">
                                                    <label class="css-input switch switch-sm switch-default">
									<input type="checkbox" id="login1-remember-me" name="login1-remember-me"><span></span> Remember Me?
								</label>
                                                </div>
                                            </div>
                                            <div class="form-group m-b-0">
                                                <div class="col-xs-12">
                                                    <button class="btn btn-app" type="submit">Log in</button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                    <!-- .card-block -->
                                </div>
                                <!-- .card -->
                                <!-- End Bootstrap Login -->
                            </div>
                            <!-- .col-lg-4 -->

                            <div class="col-lg-4">
                                <!-- Material Login -->
                                <div class="card">
                                    <div class="card-header bg-blue bg-inverse">
                                        <h4>Material</h4>
                                        <ul class="card-actions">
                                            <li>
                                                <button type="button" data-toggle="card-action" data-action="refresh_toggle" data-action-mode="demo"><i class="ion-refresh"></i></button>
                                            </li>
                                            <li>
                                                <button type="button" data-toggle="card-action" data-action="content_toggle"></button>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="card-block">
                                        <form class="form-horizontal m-t-sm" action="base_forms_samples.html" method="post" onsubmit="return false;">
                                            <div class="form-group">
                                                <div class="col-xs-12">
                                                    <div class="form-material">
                                                        <input class="form-control" type="text" id="login2-username" name="login2-username" placeholder="Enter username..." />
                                                        <label for="login2-username">Username</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="col-xs-12">
                                                    <div class="form-material">
                                                        <input class="form-control" type="password" id="login2-password" name="login2-password" placeholder="Enter password..." />
                                                        <label for="login2-password">Password</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="col-xs-12">
                                                    <label class="css-input switch switch-sm switch-default">
									<input type="checkbox" id="login2-remember-me" name="login2-remember-me"><span></span> Remember Me?
								</label>
                                                </div>
                                            </div>
                                            <div class="form-group m-b-0">
                                                <div class="col-xs-12">
                                                    <button class="btn btn-app" type="submit">Log in</button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                    <!-- .card-block -->
                                </div>
                                <!-- .card -->
                                <!-- End Material Login -->
                            </div>
                            <!-- .col-lg-4 -->

                            <div class="col-lg-4">
                                <!-- Material (floating) Login -->
                                <div class="card">
                                    <div class="card-header bg-blue bg-inverse">
                                        <h4>Material (floating)</h4>
                                        <ul class="card-actions">
                                            <li>
                                                <button type="button" data-toggle="card-action" data-action="refresh_toggle" data-action-mode="demo"><i class="ion-refresh"></i></button>
                                            </li>
                                            <li>
                                                <button type="button" data-toggle="card-action" data-action="content_toggle"></button>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="card-block">
                                        <form class="form-horizontal m-t-sm" action="base_forms_samples.html" method="post" onsubmit="return false;">
                                            <div class="form-group">
                                                <div class="col-xs-12">
                                                    <div class="form-material floating">
                                                        <input class="form-control" type="text" id="login3-username" name="login3-username">
                                                        <label for="login3-username">Username</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="col-xs-12">
                                                    <div class="form-material floating">
                                                        <input class="form-control" type="password" id="login3-password" name="login3-password">
                                                        <label for="login3-password">Password</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="col-xs-12">
                                                    <label class="css-input switch switch-sm switch-default">
									<input type="checkbox" id="login3-remember-me" name="login3-remember-me"><span></span> Remember Me?
								</label>
                                                </div>
                                            </div>
                                            <div class="form-group m-b-0">
                                                <div class="col-xs-12">
                                                    <button class="btn btn-app" type="submit">Log in</button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                    <!-- .card-block -->
                                </div>
                                <!-- .card -->
                                <!-- End Material (floating) Login -->
                            </div>
                            <!-- .col-lg-4 -->

                        </div>
                        <!-- .row -->
                        <!-- End Login Forms -->

                        <!-- Unlock Forms -->
                        <h2 class="section-title">Unlock Forms</h2>
                        <div class="row">
                            <div class="col-lg-4">
                                <!-- Bootstrap Unlock -->
                                <div class="card">
                                    <div class="card-header bg-cyan bg-inverse">
                                        <h4>Bootstrap</h4>
                                        <ul class="card-actions">
                                            <li>
                                                <button type="button" data-toggle="card-action" data-action="refresh_toggle" data-action-mode="demo"><i class="ion-refresh"></i></button>
                                            </li>
                                            <li>
                                                <button type="button" data-toggle="card-action" data-action="content_toggle"></button>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="card-block">
                                        <div class="text-center m-t-sm m-b-md">
                                            <img class="img-avatar img-avatar-96" src="assets/img/avatars/avatar4.jpg" alt="">
                                        </div>
                                        <form class="form-horizontal" action="base_forms_samples.html" method="post" onsubmit="return false;">
                                            <div class="form-group">
                                                <label class="col-xs-12" for="lock1-password">Password</label>
                                                <div class="col-xs-12">
                                                    <input class="form-control" type="password" id="lock1-password" name="lock1-password" placeholder="Enter password..." />
                                                </div>
                                            </div>
                                            <div class="form-group m-b-0">
                                                <div class="col-xs-12">
                                                    <button class="btn btn-app-cyan" type="submit">Unlock</button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                    <!-- .card-block -->
                                </div>
                                <!-- .card -->
                                <!-- End Bootstrap Unlock -->
                            </div>
                            <!-- .col-lg-4 -->

                            <div class="col-lg-4">
                                <!-- Material Unlock -->
                                <div class="card">
                                    <div class="card-header bg-cyan bg-inverse">
                                        <h4>Material</h4>
                                        <ul class="card-actions">
                                            <li>
                                                <button type="button" data-toggle="card-action" data-action="refresh_toggle" data-action-mode="demo"><i class="ion-refresh"></i></button>
                                            </li>
                                            <li>
                                                <button type="button" data-toggle="card-action" data-action="content_toggle"></button>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="card-block">
                                        <div class="text-center m-t-sm m-b-md">
                                            <img class="img-avatar img-avatar-96" src="assets/img/avatars/avatar10.jpg" alt="">
                                        </div>
                                        <form class="form-horizontal m-b-sm" action="base_forms_samples.html" method="post" onsubmit="return false;">
                                            <div class="form-group">
                                                <div class="col-xs-12">
                                                    <div class="form-material">
                                                        <input class="form-control" type="password" id="lock2-password" name="lock2-password" placeholder="Enter password..." />
                                                        <label for="lock2-password">Password</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group m-b-0">
                                                <div class="col-xs-12">
                                                    <button class="btn btn-app-cyan" type="submit">Unlock</button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                    <!-- .card-block -->
                                </div>
                                <!-- .card -->
                                <!-- End Material Unlock -->
                            </div>
                            <!-- .col-lg-4 -->

                            <div class="col-lg-4">
                                <!-- Material (floating) Unlock -->
                                <div class="card">
                                    <div class="card-header bg-cyan bg-inverse">
                                        <h4>Material (floating)</h4>
                                        <ul class="card-actions">
                                            <li>
                                                <button type="button" data-toggle="card-action" data-action="refresh_toggle" data-action-mode="demo"><i class="ion-refresh"></i></button>
                                            </li>
                                            <li>
                                                <button type="button" data-toggle="card-action" data-action="content_toggle"></button>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="card-block">
                                        <div class="text-center m-t-sm m-b-md">
                                            <img class="img-avatar img-avatar-96" src="assets/img/avatars/avatar1.jpg" alt="">
                                        </div>
                                        <form class="form-horizontal m-b-sm" action="base_forms_samples.html" method="post" onsubmit="return false;">
                                            <div class="form-group">
                                                <div class="col-xs-12">
                                                    <div class="form-material floating">
                                                        <input class="form-control" type="password" id="lock3-password" name="lock3-password">
                                                        <label for="lock3-password">Password</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group m-b-0">
                                                <div class="col-xs-12">
                                                    <button class="btn btn-app-cyan" type="submit">Unlock</button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                    <!-- .card-block -->
                                </div>
                                <!-- .card -->
                                <!-- End Material (floating) Unlock -->
                            </div>
                            <!-- .col-lg-4 -->

                        </div>
                        <!-- .row -->
                        <!-- End Unlock Forms -->

                        <!-- Contact Forms -->
                        <h2 class="section-title">Contact Forms</h2>
                        <div class="row">
                            <div class="col-lg-4">
                                <!-- Bootstrap Contact -->
                                <div class="card">
                                    <div class="card-header bg-teal bg-inverse">
                                        <h4>Bootstrap</h4>
                                        <ul class="card-actions">
                                            <li>
                                                <button type="button" data-toggle="card-action" data-action="refresh_toggle" data-action-mode="demo"><i class="ion-refresh"></i></button>
                                            </li>
                                            <li>
                                                <button type="button" data-toggle="card-action" data-action="content_toggle"></button>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="card-block">
                                        <form class="form-horizontal m-t-xs" action="base_forms_samples.html" method="post" onsubmit="return false;">
                                            <div class="form-group">
                                                <div class="col-xs-6">
                                                    <label for="contact1-firstname">First name</label>
                                                    <input class="form-control" type="text" id="contact1-firstname" name="contact1-firstname" placeholder="Your first name" />
                                                </div>
                                                <div class="col-xs-6">
                                                    <label for="contact1-lastname">Last name</label>
                                                    <input class="form-control" type="text" id="contact1-lastname" name="contact1-lastname" placeholder="Your last name" />
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-xs-12" for="contact1-email">Email</label>
                                                <div class="col-xs-12">
                                                    <div class="input-group">
                                                        <input class="form-control" type="email" id="contact1-email" name="contact1-email" placeholder="Enter email..." />
                                                        <span class="input-group-addon"><i class="ion-ios-email"></i></span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-xs-12" for="contact1-subject">Department</label>
                                                <div class="col-xs-12">
                                                    <select class="form-control" id="contact1-subject" name="contact1-subject" size="1">
									<option value="1">Support</option>
									<option value="2">Billing</option>
									<option value="3">Management</option>
									<option value="4">Feature Request</option>
								</select>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-xs-12" for="contact1-msg">Message</label>
                                                <div class="col-xs-12">
                                                    <textarea class="form-control" id="contact1-msg" name="contact1-msg" rows="7" placeholder="Enter message.."></textarea>
                                                    <div class="help-block">You can use these tags: &lt;blockquote&gt;, &lt;strong&gt;, &lt;em&gt;</div>
                                                </div>
                                            </div>
                                            <div class="form-group m-b-0">
                                                <div class="col-xs-12">
                                                    <button class="btn btn-app-teal" type="submit">Send Message</button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                    <!-- .card-block -->
                                </div>
                                <!-- .card -->
                                <!-- End Bootstrap Contact -->
                            </div>
                            <!-- .col-lg-4 -->

                            <div class="col-lg-4">
                                <!-- Material Contact -->
                                <div class="card">
                                    <div class="card-header bg-teal bg-inverse">
                                        <h4>Material</h4>
                                        <ul class="card-actions">
                                            <li>
                                                <button type="button" data-toggle="card-action" data-action="refresh_toggle" data-action-mode="demo"><i class="ion-refresh"></i></button>
                                            </li>
                                            <li>
                                                <button type="button" data-toggle="card-action" data-action="content_toggle"></button>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="card-block">
                                        <form class="form-horizontal m-t-sm" action="base_forms_samples.html" method="post" onsubmit="return false;">
                                            <div class="form-group">
                                                <div class="col-xs-6">
                                                    <div class="form-material">
                                                        <input class="form-control" type="text" id="contact2-firstname" name="contact2-firstname" placeholder="Your first name" />
                                                        <label for="contact2-firstname">First name</label>
                                                    </div>
                                                </div>
                                                <div class="col-xs-6">
                                                    <div class="form-material">
                                                        <input class="form-control" type="text" id="contact2-lastname" name="contact2-lastname" placeholder="Your last name" />
                                                        <label for="contact2-lastname">Last name</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="col-xs-12">
                                                    <div class="form-material input-group">
                                                        <input class="form-control" type="email" id="contact2-email" name="contact2-email" placeholder="Enter email..." />
                                                        <label for="contact2-email">Email</label>
                                                        <span class="input-group-addon"><i class="ion-ios-email"></i></span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="col-xs-12">
                                                    <div class="form-material">
                                                        <select class="form-control" id="contact2-subject" name="contact2-subject" size="1">
										<option value="1">Support</option>
										<option value="2">Billing</option>
										<option value="3">Management</option>
										<option value="4">Feature Request</option>
									</select>
                                                        <label for="contact2-subject">Department</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="col-xs-12">
                                                    <div class="form-material">
                                                        <textarea class="form-control" id="contact2-msg" name="contact2-msg" rows="7" placeholder="Enter message.."></textarea>
                                                        <label for="contact2-msg">Message</label>
                                                    </div>
                                                    <div class="help-block text-right">You can use these tags: &lt;blockquote&gt;, &lt;strong&gt;, &lt;em&gt;</div>
                                                </div>
                                            </div>
                                            <div class="form-group m-b-0">
                                                <div class="col-xs-12">
                                                    <button class="btn btn-app-teal" type="submit">Send Message</button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                    <!-- .card-block -->
                                </div>
                                <!-- .card -->
                                <!-- End Material Contact -->
                            </div>
                            <!-- .col-lg-4 -->

                            <div class="col-lg-4">
                                <!-- Material (floating) Contact -->
                                <div class="card">
                                    <div class="card-header bg-teal bg-inverse">
                                        <h4>Material (floating)</h4>
                                        <ul class="card-actions">
                                            <li>
                                                <button type="button" data-toggle="card-action" data-action="refresh_toggle" data-action-mode="demo"><i class="ion-refresh"></i></button>
                                            </li>
                                            <li>
                                                <button type="button" data-toggle="card-action" data-action="content_toggle"></button>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="card-block">
                                        <form class="form-horizontal m-t-sm" action="base_forms_samples.html" method="post" onsubmit="return false;">
                                            <div class="form-group">
                                                <div class="col-xs-6">
                                                    <div class="form-material floating">
                                                        <input class="form-control" type="text" id="contact3-firstname" name="contact3-firstname">
                                                        <label for="contact3-firstname">First name</label>
                                                    </div>
                                                </div>
                                                <div class="col-xs-6">
                                                    <div class="form-material floating">
                                                        <input class="form-control" type="text" id="contact3-lastname" name="contact3-lastname">
                                                        <label for="contact3-lastname">Last name</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="col-xs-12">
                                                    <div class="form-material floating input-group">
                                                        <input class="form-control" type="email" id="contact3-email" name="contact3-email">
                                                        <label for="contact3-email">Email</label>
                                                        <span class="input-group-addon"><i class="ion-ios-email"></i></span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="col-xs-12">
                                                    <div class="form-material floating">
                                                        <select class="form-control" id="contact3-subject" name="contact3-subject" size="1">
										<option value="1">Support</option>
										<option value="2">Billing</option>
										<option value="3">Management</option>
										<option value="4">Feature Request</option>
									</select>
                                                        <label for="contact3-subject">Department</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="col-xs-12">
                                                    <div class="form-material floating">
                                                        <textarea class="form-control" id="contact3-msg" name="contact3-msg" rows="7"></textarea>
                                                        <label for="contact3-msg">Message</label>
                                                    </div>
                                                    <div class="help-block text-right">You can use these tags: &lt;blockquote&gt;, &lt;strong&gt;, &lt;em&gt;</div>
                                                </div>
                                            </div>
                                            <div class="form-group m-b-0">
                                                <div class="col-xs-12">
                                                    <button class="btn btn-app-teal" type="submit">Send Message</button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                    <!-- .card-block -->
                                </div>
                                <!-- .card -->
                                <!-- End Material (floating) Contact -->
                            </div>
                            <!-- .col-lg-4 -->

                        </div>
                        <!-- .row -->
                        <!-- End Contact Forms -->

                        <!-- Mega Form -->
                        <h2 class="section-title">Mega Form</h2>
                        <div class="card">
                            <div class="card-header">
                                <h4>Multiple Columns</h4>
                                <ul class="card-actions">
                                    <li>
                                        <button type="button" data-toggle="card-action" data-action="refresh_toggle" data-action-mode="demo"><i class="ion-refresh"></i></button>
                                    </li>
                                    <li>
                                        <button type="button" data-toggle="card-action" data-action="content_toggle"></button>
                                    </li>
                                </ul>
                            </div>
                            <div class="card-block">
                                <form class="form-horizontal m-t-sm" action="base_forms_samples.html" method="post" onsubmit="return false;">
                                    <div class="row">
                                        <div class="col-sm-7">
                                            <div class="form-group">
                                                <div class="col-xs-6">
                                                    <label for="mega-firstname">First name</label>
                                                    <input class="form-control input-lg" type="text" id="mega-firstname" name="mega-firstname" placeholder="Your first name" />
                                                </div>
                                                <div class="col-xs-6">
                                                    <label for="mega-lastname">Last name</label>
                                                    <input class="form-control input-lg" type="text" id="mega-lastname" name="mega-lastname" placeholder="Your last name" />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-5">
                                            <div class="form-group">
                                                <div class="col-xs-12">
                                                    <label for="mega-lastname">Username</label>
                                                    <input class="form-control input-lg" type="text" id="mega-username" name="mega-username" placeholder="Enter username..." />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-7">
                                            <div class="form-group">
                                                <div class="col-xs-12">
                                                    <label for="mega-bio">Bio</label>
                                                    <textarea class="form-control input-lg" id="mega-bio" name="mega-bio" rows="22" placeholder="Enter a few details about yourself..."></textarea>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-5">
                                            <div class="form-group">
                                                <div class="col-xs-12">
                                                    <label for="mega-city">Where do you live?</label>
                                                    <input class="form-control input-lg" type="text" id="mega-city" name="mega-city" placeholder="Enter location..." />
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="col-xs-12">
                                                    <label for="mega-skills">Skills</label>
                                                    <select class="form-control" id="mega-skills" name="mega-skills" size="7" multiple>
									<option value="1">HTML</option>
									<option value="2">CSS</option>
									<option value="3">JavaScript</option>
									<option value="4">PHP</option>
									<option value="5">Ruby</option>
									<option value="6">Photoshop</option>
									<option value="7">Illustrator</option>
								</select>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="col-xs-6">
                                                    <label for="mega-age">Age</label>
                                                    <input class="form-control input-lg" type="text" id="mega-age" name="mega-age" placeholder="Enter age.." />
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-xs-12">Gender</label>
                                                <div class="col-xs-12">
                                                    <label class="css-input css-radio css-radio-success m-r-sm">
									<input type="radio" name="mega-gender-group"><span></span> Female
								</label>
                                                    <label class="css-input css-radio css-radio-success">
									<input type="radio" name="mega-gender-group"><span></span> Male
								</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group m-b-0">
                                        <div class="col-xs-12">
                                            <button class="btn btn-app" type="submit"><i class="ion-checkmark m-r-xs"></i> Complete Profile</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <!-- .card -->
                        <!-- End Mega Form -->
                    </div>
                    <!-- .container-fluid -->
                    <!-- End Page Content -->

                </main>

            </div>
            <!-- .app-layout-container -->
        </div>
        <!-- .app-layout-canvas -->

        <!-- Apps Modal -->
        <!-- Opens from the button in the header -->
        <div id="apps-modal" class="modal fade" tabindex="-1" role="dialog">
            <div class="modal-sm modal-dialog modal-dialog-top">
                <div class="modal-content">
                    <!-- Apps card -->
                    <div class="card m-b-0">
                        <div class="card-header bg-app bg-inverse">
                            <h4>Apps</h4>
                            <ul class="card-actions">
                                <li>
                                    <button data-dismiss="modal" type="button"><i class="ion-close"></i></button>
                                </li>
                            </ul>
                        </div>
                        <div class="card-block">
                            <div class="row text-center">
                                <div class="col-xs-6">
                                    <a class="card card-block m-b-0 bg-app-secondary bg-inverse" href="index.html">
                                        <i class="ion-speedometer fa-4x"></i>
                                        <p>Admin</p>
                                    </a>
                                </div>
                                <div class="col-xs-6">
                                    <a class="card card-block m-b-0 bg-app-tertiary bg-inverse" href="frontend_home.html">
                                        <i class="ion-laptop fa-4x"></i>
                                        <p>Frontend</p>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <!-- .card-block -->
                    </div>
                    <!-- End Apps card -->
                </div>
            </div>
        </div>
        <!-- End Apps Modal -->

        <div class="app-ui-mask-modal"></div>

        <!-- AppUI Core JS: jQuery, Bootstrap, slimScroll, scrollLock and App.js -->
        <script src="assets/js/core/jquery.min.js"></script>
        <script src="assets/js/core/bootstrap.min.js"></script>
        <script src="assets/js/core/jquery.slimscroll.min.js"></script>
        <script src="assets/js/core/jquery.scrollLock.min.js"></script>
        <script src="assets/js/core/jquery.placeholder.min.js"></script>
        <script src="assets/js/app.js"></script>
        <script src="assets/js/app-custom.js"></script>

    </body>

</html>